<template>
    <div class="food-list">
        <van-tree-select
            :main-active-index="active"
            height="55vw"
            :items = "item"
            @click-nav="navClick"
        >
        <template #content>
            <div v-for="(i,index) in subItem">
                <FoodItem :food = "i"></FoodItem>

            </div>
        </template>
        </van-tree-select>
    </div>
</template>

<script>
import { onMounted, reactive } from 'vue';
import { toRefs } from 'vue'
import FoodItem from './FoodItem.vue';

export default{
    props:['foodData'],
    components:{FoodItem},
    setup(props){

        //构建数据
        const data = reactive({
            item:[],
            subItem:[],
            active:0
        })

        //初始化数据
        const init = ()=>{
            data.item = []
            props.foodData.items.map((i,index)=>{
                data.item.push({'text':i.text})
                if(data.active == index){
                    data.subItem = i.children
                }
            })
        }

        init()



        const navClick = (index)=>{
            data.active = index
            init()
        }

        return{
            ...toRefs(data),
            navClick
        }
    }
}
</script>